<template>
  <div class="login-register">
    <el-card class="login-card">
      <h2 class="login-title">登录</h2>
      <el-form ref="loginFormRef" :model="loginForm" class="login-form">
        <el-form-item label="账号：" label-width="70px">
          <el-input v-model="loginForm.username" placeholder="账号"></el-input>
        </el-form-item>
        <el-form-item label="密码：" label-width="70px">
          <el-input v-model="loginForm.password" type="password" placeholder="密码"></el-input>
        </el-form-item>
        <el-form-item label="身份：" label-width="70px">
          <el-select v-model="loginForm.identity" placeholder="请选择身份">
            <el-option label="学生" value="student"></el-option>
            <el-option label="老师" value="teacher"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="loginForm.remember">自动登录</el-checkbox>
        </el-form-item>
        <el-form-item class="button-container">
          <el-button type="primary" @click="onLogin" class="login-button">登录</el-button>
        </el-form-item>
        <el-form-item class="button-container">
          <el-button type="text" @click="onRegister" class="register-button">注册</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router'
import axios from 'axios';

const router = useRouter()

const loginForm = reactive({
  identity: '',
  username: '',
  password: '',
  remember: false,
});

const user = reactive({
  account: '',
  password: ''
})

const loginFormRef = ref(null);

const onLogin = async () => {
  let url = '';
  let loggedInUser = loginForm;
  user.account = loginForm.username;
  user.password = loginForm.password;

  // 根据用户身份选择相应的登录 URL
  if (loginForm.identity === 'student') {
    url = 'http://localhost:8080/Login/login/student';
  } else if (loginForm.identity === 'teacher') { // 添加判断教师身份的条件
    url = 'http://localhost:8080/Login/login/teacher';
  } else {
    alert('未知的用户类型');
    return;
  }

  const response = await axios.post(url, user);
  if(response.data === '登录失败，请检查用户名和密码'){
    alert("登录失败，请检查用户名和密码");
  }else{
    const responseData = response.data;
    responseData.identity = loginForm.identity;
    console.log(responseData)
    window.localStorage.setItem('token', JSON.stringify(responseData));
    if(loginForm.identity === 'student')
      router.push({ name: 'home'})
    else if(loginForm.identity === 'teacher')
      router.push({ name: 'home'})
  }
};

const onRegister = () => {
  console.log('注册信息:', loginForm);
  router.push({ name: 'register'})
};
</script>

<style scoped>
.login-register {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-image: url('@/assets/login.jpg'); /* 替换为实际的背景图片路径 */
  background-size: cover;
  background-position: center;
}

.login-card {
  width: 400px;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.9); /* 半透明白色背景 */
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.login-title {
  text-align: center;
  margin-bottom: 20px;
}

.login-form {
  width: 100%;
}

.button-container {
  display: flex;
  justify-content: center;
}

.login-button, .register-button {
  width: 360px;
}

.login-button {
  background-color: #409eff;
  border-color: #409eff;
  color: #fff;
}

.register-button {
  background-color: #67c23a;
  border-color: #67c23a;
  color: #fff;
}
</style>
